<template>
  <div class="container">
    <div class="up">
      <h2>合肥婚庆报价</h2>
    </div>
    <div class="down">
      <price-index-cell
        v-for="item in ranList"
        :key="item.pid"
        :pro="item"
        class="cell"
      ></price-index-cell>
    </div>
  </div>
</template>

<script>
import PriceIndexCell from "./PriceIndexCell.vue"
export default {
  components: { PriceIndexCell },
  data() {
    return {
      ranList: null,
    }
  },
  methods: {
    getRanData() {
      const url = "/companys/productsRandom?n=5"
      this.axios.get(url).then((res) => {
        // console.log(res)
        this.ranList = res.data.data
      })
    },
  },
  mounted() {
    this.getRanData()
  },
}
</script>

<style lang="scss" scoped>
.container {
  width: 1200px;
  margin: 30px auto;
  padding: 15px;
  background-color: #fff;
  .up {
    margin-bottom: 13px;
  }
  .down {
    display: flex;
    justify-content: space-between;
    .cell {
      width: 19%;
      ::v-deep .item {
        width: 100%;
        > img {
          width: 100%;
        }
      }
    }
  }
}
</style>
